<template>
  <div class="tutorial">
    <h2>028 路由：命名路由</h2>
    <p>要点：通过 <code>name</code> 为路由命名，便于编程式导航与对象写法跳转。</p>
    <section>
      <h3>router/index.ts</h3>
      <pre><code>{{ codeRouter }}</code></pre>
    </section>
    <p class="note">完整示例代码位于：<code>src/backup/028_路由_命名路由</code></p>
  </div>
  </template>
<script setup>
const codeRouter = `// 创建一个路由器，并暴露出去

// 第一步：引入createRouter
import {createRouter,createWebHistory,createWebHashHistory} from 'vue-router'
// 引入一个一个可能要呈现组件
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'

// 第二步：创建路由器
const router = createRouter({
  history:createWebHashHistory(), //路由器的工作模式（稍后讲解）
  routes:[ //一个一个的路由规则
    {
      name:'zhuye',
      path:'/home',
      component:Home
    },
    {
      name:'xinwen',
      path:'/news',
      component:News
    },
    {
      name:'guanyu',
      path:'/about',
      component:About
    },
  ]
})

// 暴露出去router
export default router`;
</script>
<style scoped>
.tutorial { padding: 16px; }
.tutorial h2 { margin-bottom: 8px; }
.tutorial section { margin-top: 12px; }
pre { background: #1e1e1e; color: #dcdcdc; padding: 12px; border-radius: 8px; overflow: auto; }
.note { margin-top: 12px; color: #666; }
</style>